<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/goods' }">商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>分类列表</el-breadcrumb-item>
		</el-breadcrumb>

		<h1>分类管理</h1>
		<el-card class="box-card" style="margin-top: 20px;margin-bottom: 20px;height: 100px;">

			<el-input placeholder="请输入需要添加的类别" v-model="cateory.category_name" style="width: 300px;float: left;">
			</el-input>
			<el-button style="float: left;" type="primary" @click="addcate()">添加</el-button>
		</el-card>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="分类编号" prop="category_id">
			</el-table-column>
			<el-table-column label="类别名称" prop="category_name">
			</el-table-column>
			<el-table-column align="right" >
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)"
						icon="el-icon-edit"></el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
						icon="el-icon-delete">
					</el-button>
				</template>
			</el-table-column>

		</el-table>
			<el-pagination background @current-change="handleCurrentChange" :current-page="currentPage"
				:page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total" />
				
		<el-dialog title="类别详情" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="分类编号" :label-width="formLabelWidth">
					<el-input v-model="form.category_id" disabled style="width: 500px;float: left;"></el-input>
				</el-form-item>
				<el-form-item label="类别名称" :label-width="formLabelWidth">
					<el-input v-model="form.category_name" autocomplete="off" style="width: 500px;float: left;">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</div>

		</el-dialog>

	</div>

</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				total:10,
				dialogFormVisible: false,
				currentPage: 1,
				pageSize: 6,
				cateory: {
					category_name: '',
				},
				form: [],
				tableData: [],
				formLabelWidth: '120px',

			}
		},
		methods: {
			handleEdit(index, row) {
				this.dialogFormVisible = true;
				this.form = row;
			},
			submit() {
				axios.post("http://localhost:8080/category/update", this.form)
					.then((res) => {
						if (res.data.success) {
							this.$message.success("成功咯")
							this.dialogFormVisible = false;
							this.$router.push('/params')
						} else {
							this.$message.error("失败咯")
						}

						console.log(this.form)
					})


			},
			handleDelete(index, row) {

				this.$confirm("永久删除该类别, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						axios.get("http://localhost:8080/category/delete?category_id=" + row.category_id)
							.then((res) => {
								if (res.data.success) {
									this.$message({
										type: "success",
										message: "删除成功!",

									});
									this.getAllCateBylimit()
								} else {
									this.$message.error("删除失败,可能还有该类别产品")
								}
							})

					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});


			},
			getAllCate() {
				axios.get("http://localhost:8080/category/findAllCategory")
					.then((res) => {
						this.total = res.data.all.length;
					})
			},
			getAllCateBylimit(){
				var item = (this.currentPage - 1) * 6;
				axios.get("http://localhost:8080/category/findAllCategoryBylimit?start=" + item+"&size=" + this.pageSize)
					.then((res) => {
						this.tableData = res.data.all;
					});
			},
			handleCurrentChange(nowPage) {
				this.currentPage = nowPage;
				var item = (this.currentPage - 1) * 6;
				axios.get("http://localhost:8080/category/findAllCategoryBylimit?start=" + item+"&size=" + this.pageSize)
					.then((res) => {
						this.tableData = res.data.all;
					});
			},
			addcate() {
				if (this.cateory.category_name != "") {
					
					axios.get("http://localhost:8080/category/getCategoryIdByName?category_name="+this.cateory.category_name)
					.then((res)=>{
						if(res.data.success){
							this.$message.info("该类别已有")
						}else{
							axios.post("http://localhost:8080/category/add", this.cateory)
								.then((res) => {
									if (res.data.success) {
										this.$message.success("添加成功")
										this.cateory.category_name="";
										this.getAllCate()
										this.handleCurrentChange(this.currentPage)
										
									} else {
										this.$message.error("添加失败")
									}
								})
						}
					})
					
				} else {
					this.$alert("请输入类别")
				}

			}
		},
		created() {
			this.getAllCate();
			this.getAllCateBylimit()
		}
	}
</script>

<style scoped>

</style>
